import { ExtractPropTypes } from 'vue'
import { TuniaoType, TuniaoTypes } from '../../types/tuniao-ui'
import { validatorColorValue, validatorSizeValue } from '../../utils'

/**
 * 形状有效值
 */
const ListShapes = ['round'] as const
export type ListShape = typeof ListShapes[number]

/**
 * props参数
 */
export const listProps = {
  /** 背景颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  bgColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('bg', value)
    }
  },
  /** 字体颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  color: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 颜色类型，如果自定义了颜色则使用颜色的值 */
  type: {
    type: String,
    default: '',
    validator: (value: TuniaoType | '') => {
      return value === '' || TuniaoTypes.includes(value)
    }
  },
  /** 列表形状 round 圆角 */
  shape: {
    type: String,
    default: '',
    validator: (value: ListShape | '') => {
      return value === '' || ListShapes.includes(value)
    }
  },
  /** 字体大小, 默认单位为rpx */
  fontSize: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 加粗字体 */
  fontBold: {
    type: Boolean,
    default: false
  },
  /** 点击时的效果class */
  hoverClass: {
    type: String,
    default: 'none'
  },
  /** 底部横线 */
  bottomLine: {
    type: Boolean,
    default: false
  },
  /** 底部横线带偏移, 当bottomLine为true时生效 */
  lineOffset: {
    type: Boolean,
    default: true
  },
  /** 右边icon */
  icon: {
    type: [String, Boolean], 
    default: ''
  },
  /** 字体颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  iconColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 自定义样式, 会覆盖配置的宽高和字体信息 */
  customStyle: {
    type: Object,
    default: () => {
      return {}
    }
  },
  /** 点击列表时传递的标志符 */
  index: {
    type: [String, Number],
    default: ''
  }
}
export type ListProps = ExtractPropTypes<typeof listProps>

export const listEmits = {
  /** 点击事件 */
  click: (index: string | number) => typeof index === 'string' || typeof index === 'number'
}
export type ListEmits = typeof listEmits
